<template>
    <div class="container d-flex m-2">
        <div class="left d-flex flex-column">
            <div class="d-flex">
                <dv-border-box12>
                    <div class="border-container p-3">
                        <div class="text-title">
                            供水计划分析
                        </div>
                        <div class="d-flex jc-end m-1">
                            <dv-button border="Border2" fontSize="8"
                                @click="leftButton.supply.number('year')">年度计划</dv-button>
                            <dv-button border="Border2" fontSize="8"
                                @click="leftButton.supply.number('month')">月度计划</dv-button>
                        </div>
                        <div class="d-flex flex-column ">
                            <div class="d-flex jc-between ai-center" v-for="index in [0, 1, 2]" :key="index">
                                <div class="text-blue" style="white-space: nowrap">{{ waterType[index] }}</div>
                                <div><dv-digital-flop :config="leftInfo.supply.numberData[index]"
                                        style="width: 90px;" />
                                </div>
                            </div>
                        </div>
                        <div class="text-title">
                            供水量分析
                        </div>
                        <div class="d-flex jc-end m-1">
                            <dv-button border="Border2" fontSize="10"
                                @click="leftButton.supply.barChart('predict')">预测值</dv-button>
                            <dv-button border="Border2" fontSize="10"
                                @click="leftButton.supply.barChart('history')">历史值</dv-button>
                        </div>
                        <BarChart class="bar-chart-responsive" :values="leftInfo.supply.barData.values" />
                    </div>
                </dv-border-box12>
                <dv-border-box12>
                    <div class="border-container p-3">
                        <div class="text-title">
                            需水计划分析
                        </div>
                        <div class="d-flex jc-end m-1">
                            <dv-button border="Border2" fontSize="8"
                                @click="leftButton.demand.number('year')">年度计划</dv-button>
                            <dv-button border="Border2" fontSize="8"
                                @click="leftButton.demand.number('month')">月度计划</dv-button>
                        </div>
                        <div class="d-flex flex-column ">
                            <div class="d-flex jc-between ai-center" v-for="index in [0, 1, 2]" :key="index">
                                <div class="text-blue" style="white-space: nowrap">{{ waterType[index] }}</div>
                                <div><dv-digital-flop :config="leftInfo.demand.numberData[index]"
                                        style="width: 90px;" />
                                </div>
                            </div>
                        </div>
                        <div class="text-title">
                            需水量分析
                        </div>
                        <div class="d-flex jc-end m-1">
                            <dv-button border="Border2" fontSize="10"
                                @click="leftButton.demand.barChart('predict')">预测值</dv-button>
                            <dv-button border="Border2" fontSize="10"
                                @click="leftButton.demand.barChart('history')">历史值</dv-button>
                        </div>
                        <BarChart class="bar-chart-responsive" :values="leftInfo.demand.barData.values" />
                    </div>
                </dv-border-box12>
            </div>
            <ContainerPanel1 title="供需水占比环图" style="height:auto;">
                <div class="d-flex" style="height:16vh">
                    <dv-active-ring-chart class="flex-1" :config="leftInfo.supply.ringData" style="height:15vh" />
                    <dv-active-ring-chart class="flex-1" :config="leftInfo.supply.ringData" style="height:15vh" />
                </div>
            </ContainerPanel1>
            <ContainerPanel1 title="用水缺口" class="py-2">
                <dv-capsule-chart :config="config" class="w-100" />
            </ContainerPanel1>
        </div>
        <div class="middle d-flex flex-column">
            <dv-border-box8 :dur="5" class="map-content">
                <dv-button class="reflas" border="Border2" fontSize="10" @click="updateWaterData()">预测值</dv-button>
                <Map class="map" ref="mapRef" :series="handledSeries()" :visual-map="vm" />
            </dv-border-box8>

        </div>
        <div class="right d-flex flex-column">


            <ContainerPanel1 title="调度方案" class="flex-1 pb-2">
            
                        <Dispatching></Dispatching>

            </ContainerPanel1>
        </div>
    </div>
</template>

<script setup>
import Map from '@/components/Map.vue';
import ContainerPanel1 from '@/components/ContainerPanel1.vue';
import { ref, onMounted, watch, reactive } from 'vue';
import { useToast } from '@/components/Toast/useToast';
import { sp, Rivers } from '@/js/RiverData.js';
import { number } from 'echarts';
import { Math } from 'core-js';
import BarChart from './BarChart.vue';
import Dispatching from './Dispatching.vue';
const mapRef = ref(null);
const toast = useToast();


const leftButton = {
    supply: {
        number: (o) => {

            if (o == 'year') {
                leftInfo.supply.numberData[0].number[0] = waterData.supply.numberData.year[0];
                leftInfo.supply.numberData[1].number[0] = waterData.supply.numberData.year[1];
                leftInfo.supply.numberData[2].number[0] = waterData.supply.numberData.year[2];
                leftInfo.supply.ringData.data[0].value = waterData.supply.numberData.year[0];
                leftInfo.supply.ringData.data[1].value = waterData.supply.numberData.year[1];
                leftInfo.supply.ringData.data[2].value = waterData.supply.numberData.year[2];

            } else {
                leftInfo.supply.numberData[0].number[0] = waterData.supply.numberData.month[0];
                leftInfo.supply.numberData[1].number[0] = waterData.supply.numberData.month[1];
                leftInfo.supply.numberData[2].number[0] = waterData.supply.numberData.month[2];
                leftInfo.supply.ringData.data[0].value = waterData.supply.numberData.month[0];
                leftInfo.supply.ringData.data[1].value = waterData.supply.numberData.month[1];
                leftInfo.supply.ringData.data[2].value = waterData.supply.numberData.month[2];
            }
        },
        barChart: (o) => {
            if (o == 'predict') {

                leftInfo.supply.barData.values = waterData.supply.barData.predict;
            } else {
                leftInfo.supply.barData.values = waterData.supply.barData.history;
            }

        }
    },
    demand: {
        number: (o) => {
            if (o == 'year') {
                leftInfo.demand.numberData[0].number[0] = waterData.demand.numberData.year[0];
                leftInfo.demand.numberData[1].number[0] = waterData.demand.numberData.year[1];
                leftInfo.demand.numberData[2].number[0] = waterData.demand.numberData.year[2];
                leftInfo.demand.ringData.data[0].value = waterData.demand.numberData.year[0];
                leftInfo.demand.ringData.data[1].value = waterData.demand.numberData.year[1];
                leftInfo.demand.ringData.data[2].value = waterData.demand.numberData.year[2];
            } else {
                leftInfo.demand.numberData[0].number[0] = waterData.demand.numberData.month[0];
                leftInfo.demand.numberData[1].number[0] = waterData.demand.numberData.month[1];
                leftInfo.demand.numberData[2].number[0] = waterData.demand.numberData.month[2];
                leftInfo.demand.ringData.data[0].value = waterData.demand.numberData.month[0];
                leftInfo.demand.ringData.data[1].value = waterData.demand.numberData.month[1];
                leftInfo.demand.ringData.data[2].value = waterData.demand.numberData.month[2];
            }
        },
        barChart: (o) => {
            if (o == 'predict') {
                leftInfo.demand.barData.values = waterData.demand.barData.predict;
            } else {
                leftInfo.demand.barData.values = waterData.demand.barData.history;
            }

        }
    }
}

const waterType = reactive(["非农业用水", "农业用水", "生态用水"])

const leftInfo = {
    supply: {
        numberData: [
            reactive({
                number: [120],
                content: '{nt}m',
                textAlign: 'right'
            }),
            reactive({
                number: [300],
                content: '{nt}m',
                textAlign: 'right'
            }),
            reactive({
                number: [100],
                content: '{nt}m',
                textAlign: 'right'
            }),
        ],
        barData: reactive({
            values: [800, 900, 1200, 1000, 1500, 1800, 2000, 2200, 2100, 2300]
        }),
        ringData: reactive({
            lineWidth: 18,
            radius: 50,
            activeRadius: 55,
            digitalFlopStyle: {
                fill: 'pink',
                fontSize: 15,
            },
            data: [
                {
                    name: waterType[0],
                    value: 98,
                },
                {
                    name: waterType[1],
                    value: 150,
                },
                {
                    name: waterType[2],
                    value: 62,
                },
            ],
        })
    },
    demand: {
        numberData: [
            reactive({
                number: [200],
                content: '{nt}m',
                textAlign: 'right'
            }),
            reactive({
                number: [100],
                content: '{nt}m',
                textAlign: 'right'
            }),
            reactive({
                number: [100],
                content: '{nt}m',
                textAlign: 'right'
            }),
        ],
        barData: reactive({
            values: [800, 900, 1200, 1000, 1500, 1800, 2000, 2200, 2100, 2300]
        }),
        ringData: reactive({
            lineWidth: 18,
            radius: 50,
            activeRadius: 55,
            digitalFlopStyle: {
                fill: 'pink',
                fontSize: 15,
            },
            data: [
                {
                    name: waterType[0],
                    value: 98,
                },
                {
                    name: waterType[1],
                    value: 150,
                },
                {
                    name: waterType[2],
                    value: 62,
                },
            ],
        })
    }
}

let waterData = reactive({
    supply: {
        numberData: {
            year: [10, 233, 134],
            month: [23, 213, 1312],
        },
        barData: {
            predict: [800, 950, 1200, 1000, 500, 1800, 2000, 2200, 2100, 2300],
            history: [800, 900, 1200, 1000, 1500, 1800, 2000, 2200, 2100, 2300]
        }
    },
    demand: {
        numberData: {
            year: [23, 2121, 1312],
            month: [223, 213, 112],
        },
        barData: {
            predict: [800, 900, 1200, 1000, 1500, 800, 2000, 2200, 2100, 2300],
            history: [800, 900, 1200, 1000, 1500, 1800, 200, 2200, 200, 2300]
        }

    }
})

const updateWaterData = (o) => {
    if (o == null) {
        waterData = {
            supply: {
                numberData: {
                    year: [10, 233, 134],
                    month: [23, 213, 1312],
                },
                barData: {
                    predict: [800, 950, 1200, 1000, 500, 1800, 2000, 2200, 2100, 2300],
                    history: [800, 900, 1200, 1000, 1500, 1800, 2000, 2200, 2100, 2300]
                }
            },
            demand: {
                numberData: {
                    year: [23, 211, 1312],
                    month: [223, 213, 112],
                },
                barData: {
                    predict: [800, 900, 1200, 1000, 1500, 800, 2000, 2200, 2100, 2300],
                    history: [800, 900, 1200, 1000, 1500, 1800, 200, 2200, 200, 2300]
                }

            }
        }
    } else {
        waterData = {
            supply: {
                numberData: {
                    year: [1053, 5333, 434],
                    month: [23, 253, 1312],
                },
                barData: {
                    predict: [800, 950, 1340, 1000, 500, 1800, 2000, 2200, 2100, 2300],
                    history: [800, 900, 1200, 1330, 1500, 1800, 2000, 2200, 2100, 2300]
                }
            },
            demand: {
                numberData: {
                    year: [23, 2121, 112],
                    month: [223, 293, 112],
                },
                barData: {
                    predict: [800, 900, 1200, 400, 1500, 800, 2000, 2200, 2100, 2300],
                    history: [800, 600, 1200, 1000, 1800, 1800, 200, 2200, 200, 2300]
                }

            }
        }
    }
    initWaterData()
}

const config = ref({
    data: [
        {
            name: '津南',
            value: 267
        },
        {
            name: '河西',
            value: 123
        },
        {
            name: '滨海新区',
            value: 98
        },
        {
            name: '和平',
            value: 75
        },
        {
            name: '西青',
            value: 66
        },
    ],
    colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
    unit: '吨',
    labelNum: 4,
})
const vm = {
    seriesIndex: 0,
    type: 'continuous',
    min: 0,
    max: 100,
    show: false,
    inRange: {
        color: ['#CE676C', '#4E1C1E']
    }
}

const handledSeries = () => {
    const scatterData = [];
    for (const item of sp) {
        for (const section of item.sections) {
            const randomValue = 50
            scatterData.push({ coord: section.position, value: randomValue, name: section.name });
        }
    }
    const series = [
        {
            zlevel: 100,
            type: 'scatter',
            coordinateSystem: 'geo',
            data: scatterData.map(item => ({
                name: item.name,
                value: [...item.coord, item.value]
            })),
            symbolSize: 20,
            symbol: 'diamond',
            label: {
                show: true,
                formatter: '{b}' // 显示数据项的名称
            },
            itemStyle: {
                color: 'blue'
            }
        },
    ];
    // 从河流数据中提取终点坐标
    const riverMidPoints = Rivers.map(river => {
        const coords = river.data;
        // 获取河流坐标数组的最后一个点作为终点

        const endPoint = coords.at(coords.length / 2);
        return {
            coord: [endPoint[0], endPoint[1]], // 提取经纬度坐标
            name: river.name // 使用河流名称
        };
    });

    // 创建散点图数据
    const riverScatterData = riverMidPoints.map(item => ({
        coord: item.coord,
        name: item.name,
        value: 50 // 固定值或根据需要设置
    }));

    const riverSeries ={
        zlevel: 100,
        type: 'scatter',
        coordinateSystem: 'geo',
        data: riverScatterData.map(item => ({
            name: item.name,
            value: [...item.coord, item.value]
        })),
        symbolSize: 20,
        symbol: 'diamond',
        label: {
            show: true,
            formatter: '{b}' // 显示河流名称
        },
        itemStyle: {
            color: '#135edf'
        }
    };

    series.splice(1, 0, riverSeries);

    function createLineSeriesConfig() {
        return {
            type: 'lines',
            selectedMode: 'single',
            polyline: true,
            coordinateSystem: 'geo',
            silent: false,
            select: {
                lineStyle: {
                    color: 'blue',
                    width: 2
                },
                effect: {
                    color: 'yellow'
                }
            },
            data: [
                {
                    coords: null,
                    rname: null // 存储河流名称
                }
            ],
            lineStyle: {
                color: '#135edf',
                width: 2,
                type: 'solid',
            },
            effect: {
                show: true,
                period: 10,
                trailLength: 0.3,
                symbol: 'arrow',
                symbolSize: 6
            },
        };
    }
    function insertSeries(seriess, coords, name) {
        const newTemp = createLineSeriesConfig();
        newTemp.data[0].coords = coords;
        newTemp.data[0].rname = name;
        seriess.splice(2, 0, newTemp);
    }

    Rivers.forEach(river => {
        insertSeries(series, river.data, river.name);
    });
    return series
};

onMounted(() => {
    const chartInstance = mapRef.value.myChart;

    chartInstance.on('click', function (params) {
        if (params.seriesType === 'lines') {
            console.log(params)
            toast.info("这是" + params.data.rname)
        } else if (params.componentType === 'geo') {
            updateWaterData(params.name)

        }
        else {
            console.log(params)
        }
    });

});
const initWaterData = () => {
    leftInfo.demand.numberData[0].number[0] = waterData.demand.numberData.year[0];
    leftInfo.demand.numberData[1].number[0] = waterData.demand.numberData.year[1];
    leftInfo.demand.numberData[2].number[0] = waterData.demand.numberData.year[2];
    leftInfo.demand.barData.values = waterData.demand.barData.predict;
    leftInfo.demand.ringData.data[0].value = waterData.demand.numberData.year[0];
    leftInfo.demand.ringData.data[1].value = waterData.demand.numberData.year[1];
    leftInfo.demand.ringData.data[2].value = waterData.demand.numberData.year[2];

    leftInfo.supply.numberData[0].number[0] = waterData.supply.numberData.year[0];
    leftInfo.supply.numberData[1].number[0] = waterData.supply.numberData.year[1];
    leftInfo.supply.numberData[2].number[0] = waterData.supply.numberData.year[2];
    leftInfo.supply.barData.values = waterData.supply.barData.predict;
    leftInfo.supply.ringData.data[0].value = waterData.supply.numberData.year[0];
    leftInfo.supply.ringData.data[1].value = waterData.supply.numberData.year[1];
    leftInfo.supply.ringData.data[2].value = waterData.supply.numberData.year[2];
}



</script>

<style lang="scss" scoped>
.container {
    height: 95%;

    .left {
        flex: 1;


    }

    .middle {
        flex: 2 0 0;
        max-width: 50vw;
        position: relative;

        .reflas {
            position: absolute;
            top: 10px;
            right: 10px;
            z-index: 100;
        }

        .map-content {
            flex: 8;
            margin-bottom: 60px;

            .map {
                height: 100%;
                box-sizing: border-box;
                padding: 5px;
            }
        }


        .info-panel {
            flex: 1 0 0;
        }
    }

    .right {
        flex: 1;

        .title {
            color: #00c2ff;
            text-align: left;
            border-bottom: 1px solid #0099c7;
        }

        .scheme-search {

            .search {
                background: none;
                width: 90%;
                border: 3px solid #235fa7;
                border-radius: 10px;
                height: 100px;
                margin-top: 10px;
                color: #bbb;

            }

            .search:focus-visible {
                border: 3px solid #235fa7;
                outline: none;
            }

            .search-button {
                text-align: right;
            }
        }


    }
}

.text-blue {
    color: #00c2ff;
}

.text-title {
    color: #bbb;
}
.bar-chart-responsive {
  height: 20vh;
}

@media (max-height: 1000px) {
  .bar-chart-responsive {
    height: 15vh;
  }
}
</style>